<template>
	<div class="root">
		<div>
			<div class="time-title">1.【ny-time-axis】基础用法</div>
			<el-button @click="setTime('001')">绑定方式修改时间</el-button>
			<ny-time-axis 
				v-model="example001.data" 
				:min="example001.min"
				class="timeline" 
				:customTheme="example001.customTheme" 
				@changed="timeChanged">
			</ny-time-axis>
			<div class="time-text">开始时间：{{ example001.data.startTime }}</div>
			<div class="time-text">结束时间：{{ example001.data.endTime }}</div>
		</div>

		<div>
			<div class="time-title">2.【ny-time-axis】锁定时间轴，禁用起始按钮和时间条</div>
			<el-button @click="setTime('002')">绑定方式修改时间</el-button>
			<ny-time-axis
				v-model="example002.data"
				:interactive="example002.interactive"
				:min="example002.min"
				:max="example002.max"
				class="timeline"
				:theme="example002.theme"
				@changed="timeChanged"
			>
				<!-- :customTheme="customTheme"-->
				<!-- :theme="theme"-->
			</ny-time-axis>
			<div class="time-text">开始时间：{{ example002.data.startTime }}</div>
			<div class="time-text">结束时间：{{ example002.data.endTime }}</div>
		</div>

		<div>
			<div class="time-title">3.【ny-date-axis】初始化的起始时间间隔为步长，请保证[时间间隔]能被max-min[时间段]整除，且[时间间隔]不要跨区间，例如下面例子：总时间段60天，时间间隔为2天，30个小时间段</div>
			<!-- <el-button @click="setTheme('003')">绑定方式修改时间</el-button> -->
			<ny-date-axis
				v-model="example003.data"
				:interactive="example003.interactive"
				:min="example003.min"
				:max="example003.max"
				class="timeline"
				:theme="example003.theme"
				@changed="timeChanged"
			>
				<!-- :customTheme="customTheme"-->
				<!-- :theme="theme"-->
			</ny-date-axis>
			<div class="time-text">开始时间：{{ example003.data.startTime }}</div>
			<div class="time-text">结束时间：{{ example003.data.endTime }}</div>
		</div>
		
		<div>
			<div class="time-title">4.【ny-time-axis】设置最大时间范围 (range = 5)</div>
			<ny-time-axis 
				v-model="example004.data"
				:range="example004.range"
				:min="example004.min"
				class="timeline"
				@changed="timeChanged">
			</ny-time-axis>
			<div class="time-text">开始时间：{{ example004.data.startTime }}</div>
			<div class="time-text">结束时间：{{ example004.data.endTime }}</div>
		</div>
		
	</div>
</template>

<script>
export default {
	name: 'example-time-date-axis',
	data() {
		return {
			example001: {
				data: {
					startTime: '2021/06/01',
					endTime: '2022/06/01'
				},
				min: '2021/01/01',
				// max: '2022/08/01', //max如果在组件上未声明，则不参与绑定，默认取endTime
				// theme: 'light', //dark,light(default light)
				customTheme: {
					//if not null, be first
					color: '#000000',
					backgroudColor: '#BBDAFA',
					progressColor: '#8d8d8d',
					barColor: '#ffffff',
					// slideBackground: `url(${require('../../../assets/slider_pattern2.png')})`
					slideBackground: '#00417a'
				}
			},
			example002: {
				data: {
					startTime: '2021/06/01',
					endTime: '2022/06/01'
				},
				interactive: {
					inputDisabled: true,
					leftButtonDisabled: true,
					rightButtonDisabled: true,
					slideButtonDisabled: true
				},
				min: '2021/01/01',
				max: '2022/08/01',
				theme: 'dark' //dark,light(default light)
			},
			example003: {
				data: {
					startTime: '2022/08/21',
					endTime: '2022/08/22'
				},
				interactive: {
					slideButtonDisabled: false
				},
				min: '2022/08/01',
				max: '2022/08/30',
				theme: 'dark' //dark,light(default light)
			},
			example004: {
				data: {
					startTime: '2022/09/17',
					endTime: '2022/09/27'
				},
				range: 5,
				min: '2022/09/13',
				theme: 'dark' //dark,light(default light)
			}
		};
	},
	mounted() {},
	methods: {
		setTime(type) {
			const date = {
				startTime: '2022/04/01',
				endTime: '2022/08/01'
			};
			const min = '2022/02/01';
			const max = '2022/08/26';
			this[`example${type}`].data = date;
			this[`example${type}`].min = min;
			this[`example${type}`].max = max;
		},
		timeChanged(val) {
			console.log(val);
		}
	}
};
</script>

<style>
.root {
	padding: 10px;
}
.time-title {
	margin-top: 10px;
	margin-bottom: 5px;
	/* color: #034631; */
	font-weight: bold;
}
.time-text {
	margin-top: 10px;
}
</style>
